import React, { Fragment } from 'react'
import styles from './DataCard.module.scss'
import iconHelp from "@/assets/image/icon-help.png"
import iconUp from "@/assets/image/icon-up.png"
import iconDown from "@/assets/image/icon-down.png"
import { Popover, PopoverPlacement } from 'react-vant';

export interface DataCardProps {
    countKey: string,
    momRatioKey: string,
    preCountDataKey?: string,
    name: string,
    count: string,
    preCountData: string,
    desc: string,
    momRatio: string,
    bgColor?: string,
    hiddenPreCountData: boolean,
    lineDiagramRules: number
    style?: React.CSSProperties | null,
    unity?: string,
    popoverPlacement?: string,
    countPosition?: string,
    pcLeft?: boolean
}


const DataCard: React.FC<DataCardProps> = (props) => {
    const { name, desc, count, preCountData, momRatio, hiddenPreCountData, popoverPlacement } = props

    return (<div className={styles['card-block']}>
        <div className={styles['card-title-block']}>
            <span className={styles['card-name']}>{name}</span>
            <Popover theme="dark" placement={popoverPlacement as PopoverPlacement || "top-start"}
                reference={<div className={styles['icon-help-block']}><img className={styles['icon-help']} src={iconHelp} alt="" /></div>}>
                <div className={styles['popover-cus-block']}>{desc}</div>
            </Popover>
        </div>
        <div className={styles['card-count-block']}>{count}</div>
        <div className={styles['card-momRatio-block']}>
            {!hiddenPreCountData ? (<div className={styles['pre-count-block']}>上一周期：{preCountData}</div>) : ''}
            <div className={styles['mom-ratio-block']}>环比：
                {
                    momRatio !== "-" ? (
                        <Fragment>
                            < img className={`${styles['icon-up']} `} src={Number(momRatio) >= 0 ? iconUp : iconDown} alt="" />
                            <span className={`${momRatio === undefined ? styles['ratio-text'] : Number(momRatio) >= 0 ? styles['ratio-text-up'] : styles['ratio-text-down']} `}>
                                {Number.isNaN(Math.abs(Number(momRatio))) ? '-' : Math.abs(Number(momRatio))}%
                            </span>
                        </Fragment>
                    ) :
                        (
                            <span className={styles['ratio-text']}>
                                {momRatio}
                            </span>
                        )
                }
            </div>
        </div>
    </div >)
}

export default DataCard
